<!--
    使用 v-bind 指令为元素绑定属性
    语法： v-bind: item="{ object }"
    item为绑定的元素类型,object为绑定的对象: arry[] object{}
-->
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Class 与 Style 绑定</title>
    <script src="js/vue.js"></script>
</head>
<body>

<div id="ex1" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

<div id="ex2" v-bind:class="classObject"></div>

<div id="ex3" v-bind:class="classObject"></div>

<div id="ex4" v-bind:class="[activeClass, errorClass]"></div>

<div id="ex5" v-bind:class="[{ active: isActive }, errorClass]"></div>


<div id="ex6" v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div id="ex7" v-bind:style="styleObject"></div>

<div id="ex8" v-bind:data="[baseStyles, overridingStyles]"></div>

</body>

<script>
    var ex1 =   new Vue({
        el:"#ex1",
        data: {
            isActive: true,
            hasError: false
        }
    });

    var ex2 =   new Vue({
        el:"#ex2",
        data: {
            classObject: {
                "active": true,
                "text-danger": true
            }
        }
    });

    var ex3 =   new Vue({
        el:"#ex3",
        data: {
            isActive: true,
            error: null
        },
        computed: {
            classObject: function () {
                return {
                    active: this.isActive && !this.error,
                    'text-danger': this.error && this.error.type === 'fatal'
                }
            }
        }
    });

    var ex4 =   new Vue({
        el:"#ex4",
        data: {
            activeClass: 'active',
            errorClass: 'text-danger'
        }
    });

    var ex5 =   new Vue({
        el:"#ex5",
        data: {
            isActive:true,
            errorClass: 'text-danger'
        }
    });



    var ex6 =   new Vue({
        el:"#ex6",
        data: {
            activeColor: 'red',
            fontSize: 30
        }
    });

    var ex7 =   new Vue({
        el:"#ex7",
        data: {
            styleObject: {
                color: 'red',
                fontSize: '13px'
            }
        }
    });

    var ex8 =   new Vue({
        el:"#ex8",
        data: {
            baseStyles:"id:1111",
            overridingStyles:"no:2222"
        }
    });
</script>
</html>